<template>
	<div class="table_com">
		<div class="tab_box" :style="`--index: ${active}`">
			<div class="item_box" :class="index == active ? 'active' : ''" v-for="(item,index) in list" :key="index"
				@click="handleItem(index)">
				{{item}}
			</div>
		</div>
		<div class="table_box">
			<div v-if="active == 0 || active == 1">
				<!-- overscroll-behavior: none; -->
				<div style="overflow-x: auto;" :style="$utils.isSafari() ? 'overscroll-behavior: none;' : ''">
					<div style="width: 100%;min-width: 550px;">
						<myTable :data="active == 0 ? activeIngData : closedData " style="width: 100%; overflow: auto;"
							header-row-class-name="header_class" row-class-name="row_class" stripe v-loading="loading"
							element-loading-background="rgba(0, 0, 0, 0.8)" key="1" v-if="active == 0 || active == 1">
							<el-table-column prop="date" :label="$t('home.pair')" min-width="120" align="center">
								<template slot-scope="scope">
									<div class="item-a0">
										<div class="img_box">
											<img
												:src="scope.row.order ? scope.row.order.currency_match.base_currency.logo : scope.row.currency_match.base_currency.logo" />
											<img :src="scope.row.order ? scope.row.order.currency.logo : scope.row.currency.logo" />
										</div>
										{{ scope.row.order ? scope.row.order.symbol_name : scope.row.symbol_name }}
										<img
											:src="scope.row.type == 1 ? require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')"
											class="zhang" />
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="name" :label="$t('home.currency')" min-width="60" align="center">
								<template slot-scope="scope">
									USDT
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.amount')" min-width="60" align="center">
								<template slot-scope="scope">
									{{scope.row.amount}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.open')" min-width="90" align="center">
								<template slot-scope="scope">
									{{scope.row.open_price}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.close')" key="close" min-width="100" align="center"
								v-if="active == 1">
								<template slot-scope="scope">
									{{scope.row.end_price}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.yield')" key="YIELD" min-width="60" align="center">
								<template slot-scope="scope">
									{{scope.row.profit_ratio}}%
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.profit')" key="PROFIT" min-width="60" align="center"
								v-if="active == 0">
								<template slot-scope="scope">
									{{scope.row.profit}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.time')" key="TIME" min-width="70" align="right"
								v-if="active == 0">
								<template slot-scope="scope">
									<div style="line-height: normal;">
										00:{{scope.row.remain_milli_seconds >= 10 ? scope.row.remain_milli_seconds : `0${scope.row.remain_milli_seconds}`}}
										<div style="width: 60px; margin-left: auto;">
											<el-progress :percentage="(scope.row.remain_milli_seconds / 15) * 100" :show-text="false"
												:stroke-width="3" color="#137EFE" define-back-color="#202D5C"></el-progress>
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.profit')" key="PROFIT" min-width="50" align="center"
								v-else>
								<template slot-scope="scope">
									{{scope.row.profit}}
								</template>
							</el-table-column>
						</myTable>
					</div>
				</div>
			</div>
			<div v-else-if="active == 2">
				<div style="overflow-x: auto;" :style="$utils.isSafari() ? 'overscroll-behavior: none;' : ''">
					<div style="width: 100%;min-width: 700px;">
						<myTable :data="tableData" style="width: 100%; overflow: auto;" header-row-class-name="header_class"
							row-class-name="row_class" stripe v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)"
							key="2">
							<el-table-column prop="date" :label="$t('home.player')" min-width="100" v-if="active == 2">
								<template slot-scope="scope">
									<div class="user_header">
										<img :src="scope.row.avatar" class="header" />
										{{scope.row.nickname}}
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="date" :label="$t('home.pair')" min-width="120" align="center">
								<template slot-scope="scope">
									<div class="item-a0">
										<div class="img_box">
											<img :src="scope.row.currency_match.base_currency.logo" />
											<img :src="scope.row.currency.logo" />
										</div>
										{{scope.row.symbol_name}}
										<img
											:src="scope.row.type == 1 ? require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')"
											class="zhang" />
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="name" :label="$t('home.currency')" min-width="60" align="center">
								<template slot-scope="scope">
									USDT
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.amount')" min-width="60" align="center">
								<template slot-scope="scope">
									{{scope.row.amount}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.open')" min-width="100" align="center">
								<template slot-scope="scope">
									{{scope.row.open_price}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.close')" key="CLOSE" min-width="100" align="center">
								<template slot-scope="scope">
									{{scope.row.end_price}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.yield')" key="YIELD" min-width="60" align="center">
								<template slot-scope="scope">
									{{scope.row.profit_ratio}}%
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.profit')" key="PROFIT" min-width="50" align="center">
								<template slot-scope="scope">
									{{scope.row.profit}}
								</template>
							</el-table-column>
						</myTable>
					</div>
				</div>
			</div>
			<div v-else-if="active == 3">
				<div class="but_box">
					<el-popover placement="bottom" width="100" trigger="click" :visible-arrow="false" popper-class="tick tick2"
						v-model="hasRoi">
						<el-button slot="reference">{{roiList[activeRoi]}} <i
								class="el-icon-arrow-down el-icon--right"></i></el-button>
						<div class="coin_item" :class="activeRoi == index ? 'active' : ''" v-for="(item,index) in roiList"
							:key="index" @click="handleRoi(index)">
							<i class="el-icon-check" v-if="activeRoi == index"></i>
							{{item}}
						</div>
					</el-popover>
					<el-popover placement="bottom" width="100" trigger="click" :visible-arrow="false" popper-class="tick tick2"
						v-model="hasDay">
						<el-button slot="reference">{{dayList[activeDay].name}} <i
								class="el-icon-arrow-down el-icon--right"></i></el-button>
						<div class="time_item" :class="activeDay == index ? 'active' : ''" v-for="(item,index) in dayList"
							:key="index" @click="handleDay(index)">
							<i class="el-icon-check" v-if="activeDay == index"></i>
							<span>{{item.name}}</span>
						</div>
					</el-popover>
				</div>
				<div style="overflow-x: auto;" :style="$utils.isSafari() ? 'overscroll-behavior: none;' : ''">
					<div style="width: 100%;min-width: 450px;">
						<myTable :data="tableData" style="width: 100%; overflow: auto;" header-row-class-name="header_class"
							row-class-name="row_class" stripe v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)"
							key="3" v-if="active == 3">
							<el-table-column prop="date" :label="$t('home.player')" min-width="110">
								<template slot-scope="scope">
									<div class="user_header">
										<img :src="scope.row.avatar" class="header" />
										{{scope.row.nickname}}
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.trades')" key="TRADES" min-width="70" align="center">
								<template slot-scope="scope">
									{{scope.row.num}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.tradesWins')" key="TRADES WINS" min-width="110"
								align="center">
								<template slot-scope="scope">
									{{scope.row.profit_num}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.ROI')" key="ROI" min-width="80" align="center">
								<template slot-scope="scope">
									{{scope.row.profit_ratio}}%
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="`${$t('home.PROFIT')}(U)`" key="PROFIT(U)" min-width="50"
								align="center">
								<template slot-scope="scope">
									<p :style="`color: ${scope.row.total_profit > 0 ? '#2ECC71' : '#FF5449'};`">{{scope.row.total_profit}}
									</p>
								</template>
							</el-table-column>
						</myTable>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		microtradeLists,
		microtradeRankingList
	} from '@/api/home'
	import myTable from '@/components/my_el_table.vue'
	export default {
		props: {},
		components: {
			myTable,
		},
		data() {
			return {
				hasDay: false,
				hasRoi: false,
				tableNone: false,
				loading: false,
				active: 2,
				activeDay: 0,
				activeRoi: 0,
				// list: ['ACTIVE BETS', 'CLOSED BETS', 'PUBLIC BETS', 'LEADERBOARD'],
				tableData: [],
				activeIngData: [], // 进行中的
				closedData: [], // 关闭的
				roiList: ['PNL', 'ROI'],
				// dayList: ['Day', 'Week', 'Month'],
			}
		},
		computed: {
			...mapState(['timeDown', 'newMyDownOrder', 'matches']),
			dayList() {
				return [{
					name: this.$t('home.day'),
					id: 'day'
				}, {
					name: this.$t('home.week'),
					id: 'week'
				}, {
					name: this.$t('home.month'),
					id: 'month'
				}]
			},
			list() {
				return [this.$t('home.activeBets'), this.$t('home.closeBets'), this.$t('home.publicBets'), this.$t(
					'home.leaderboard'), ]
			}
		},
		watch: {
			timeDown(val, oldVal) {
				// console.log('val', val);
				if (this.activeIngData && this.activeIngData.length > 0) {
					this.activeIngData.map((item, index) => {
						if (item.remain_milli_seconds <= 0) {
							this.$nextTick(() => {
								this.activeIngData.splice(index, 1)
								this.page = 1;
								this.getCloseData()
							})
							if (this.active == 1) {
								this.page = 1
								this.getCloseData()
							}
							this.$store.dispatch('getBalance')
							this.$store.commit('closeMyOrderDom', item)
							// console.log('倒计时结束的item', item);
						} else {
							item.remain_milli_seconds--
						}
					})
				}
			},
			newMyDownOrder(val) {
				if (val && val.uid) {
					// console.log('val', val);
					this.pushActiveIngTable(val)
				}
			},
		},
		mounted() {
			this.getCloseData()
		},
		methods: {
			// addScroll() {
			// 	this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollFunc);
			// 	this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollFunc);
			// },
			// scrollFunc(res) {
			// 	const height = res.target;
			// 	const clientHeight = height.clientHeight;
			// 	const scrollTop = height.scrollTop;
			// 	const scrollHeight = height.scrollHeight;
			// 	if (clientHeight + scrollTop === scrollHeight) {
			// 		if (this.tableNone || this.loading) return
			// 		this.page++
			// 		this.getCloseData()
			// 	}
			// },
			async getList() {
				const res = await microtradeLists({
					match_id: this.matches.id,
					is_public: 0, // 是否是公共 1是 0当前用户
					status: 1,
					limit: 20,
					page: this.page,
				})
				// console.log('res', res);
				if (res && res.code == 1) {
					this.activeIngData = res.data.data
				}
			},
			async getCloseData() {
				if (this.loading) return
				this.loading = true;
				const res = await microtradeLists({
					match_id: this.matches.id,
					is_public: this.active == 1 ? 0 : 1, // 是否是公共 1是 0当前用户
					status: 3,
					limit: 20,
					page: this.page,
				}).catch(err => this.loading = false)
				// console.log('res', res, {
				// 	match_id: this.matches.id,
				// 	is_public: this.active == 1 ? 0 : 1, // 是否是公共 1是 0当前用户
				// 	status: 3,
				// 	limit: 20,
				// 	page: this.page,
				// });
				// console.log('ress', res.data);
				if (res && res.code == 1) {
					if (this.active == 1) {
						this.closedData = res.data.data
					} else {
						this.tableData = res.data.data
					}
				}
				this.loading = false
				// console.log('res', res, this.tableData);
			},
			async getRanking() {
				if (this.loading) return
				this.loading = true;
				const res = await microtradeRankingList({
					time_type: this.dayList[this.activeDay].id,
					sort: this.roiList[this.activeRoi],
				}).catch(err => this.loading = false)
				if (res && res.code == 1) {
					this.tableData = [];
					this.tableData = res.data
				}
				this.loading = false
			},
			pushActiveIngTable(val) {
				this.activeIngData.push(val)
			},
			handleItem(index) {
				if (this.loading) return
				this.page = 1;
				this.active = index;
				if (index == 1 || index == 2) {
					this.getCloseData()
				} else if (index == 3) {
					this.getRanking()
				}
			},
			async handleDay(index) {
				this.activeDay = index
				await this.getRanking()
				this.hasDay = false
			},
			async handleRoi(index) {
				this.activeRoi = index
				await this.getRanking()
				this.hasRoi = false
			}
		}
	}
</script>

<style scoped lang="less">
	.table_com {
		.tab_box {
			display: flex;
			align-items: center;
			border: 1px solid #353F4C;
			padding: 6px;
			border-radius: 16px;
			margin-bottom: 12px;
			font-size: 10px;
			color: #A4A8AB;

			.item_box {
				position: relative;
				z-index: 1;
				flex: 1;
				height: 40px;
				line-height: 40px;
				border-radius: 12px;
				font-weight: bold;
				transition: all .3s;
			}

			.active {
				// background-color: #137EFE;
				color: #fff;
			}

			&::after {
				content: ' ';
				position: absolute;
				z-index: 0;
				height: 40px;
				background-color: #137EFE;
				width: calc(25% - 14px);
				border-radius: 12px;
				transition: all .3s;
				transform: translateX(calc(var(--index) * 100%));
			}
		}

		.table_box {
			width: 100%;
			min-height: 820px;
			overflow: hidden;
			// overscroll-behavior: none;

			::-webkit-scrollbar {
				display: none;
			}


			>div {
				overflow: hidden;
				// overscroll-behavior: none;
			}

			::v-deep .el-table__header-wrapper {
				overflow: unset;
				position: sticky;
				top: 0;
				z-index: 9;
			}

			::v-deep .el-table__body-wrapper {
				// overscroll-behavior: none;
				// background-color: pink;

				.el-table__body {
					// overscroll-behavior: none;
				}
			}

			::v-deep .el-table--scrollable-x .el-table__body-wrapper {
				overflow-y: unset;
				overflow-x: unset;

				&::-webkit-scrollbar {
					display: none;
				}
			}

			.el-table {
				background-color: transparent;
				// overscroll-behavior: none;

				&::before {
					background-color: transparent
				}
			}

			::v-deep .header_class {
				position: relative;
				// background-color: transparent;
				background-color: #161D26;

				th.el-table__cell {
					padding: 0;
					background-color: transparent;
					border-bottom: none;
					font-size: 12px;
					color: #fff;

					.cell {
						line-height: 20px;
						padding-left: 5px;
						padding-right: 5px;
					}
				}
			}

			::v-deep .row_class {
				background-color: transparent;

				&:hover {
					td.el-table__cell {
						background-color: transparent;
					}
				}

				td.el-table__cell {
					padding: 0;
					font-size: 12px;
					border-bottom: none;
					color: #fff;

					.cell {
						// height: 40px;
						// padding: 8px 0;
						line-height: 40px;
						padding-left: 5px;
						padding-right: 5px;
						white-space: nowrap;
					}
				}

				&.el-table__row--striped {
					td.el-table__cell {
						background: #1B232E;
					}
				}
			}

			.user_header {
				display: flex;
				align-items: center;

				.header {
					width: 32px;
					height: 32px;
					border-radius: 6px;
					margin-right: 5px;
				}
			}

			.item-a0 {
				display: flex;
				align-items: center;
				white-space: nowrap;

				.img_box {
					display: flex;

					img {
						position: relative;
						z-index: 2;
						width: 20px;
						border-radius: 50%;
					}

					img+img {
						margin-left: -10px;
						z-index: 1;
						margin-right: 5px;
					}
				}

				.zhang {
					width: 10px;
					margin-left: 10px;
				}
			}

			.but_box {
				display: flex;
				margin-bottom: 10px;

				::v-deep .el-button {
					min-width: 100px;
					height: 40px;
					padding: 10px;
					font-size: 12px;
					color: #A4A8AB;
					margin: 4px;
					background-color: #212A36;
					border: 0;
					border-radius: 12px;
				}
			}
		}
	}
</style>